<!-- 新建争议单弹窗组件 -->
<template>
  <el-dialog
    width="65%"
    title="新建争议单"
    :visible.sync="isVisible"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form
      label-width="100px"
      :model="dialogData"
      ref="dialogData"
      :rules="formDataRules"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="申请人名称:" required prop="applyStaffName">
            <el-input v-model="dialogData.applyStaffName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人电话:" required prop="applyStaffPhone">
            <el-input v-model="dialogData.applyStaffPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称:" required prop="custName">
            <el-input v-model="dialogData.custName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="统一社会信用代码:" prop="orgUscc">
            <el-input v-model="dialogData.orgUscc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件类型:" required prop="certType">
            <el-select
              v-model="dialogData.certType"
              placeholder="请选择"
              class="u-form-width"
            >
              <el-option
                v-for="item in idType"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码:" required prop="certNum">
            <el-input v-model="dialogData.certNum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="错误类型:" required prop="problemType">
            <el-checkbox-group v-model="dialogData.problemType" size="small">
              <el-checkbox-button
                v-for="item in errTypeArr"
                :label="item.val"
                :key="item.val"
                >{{ item.label }}</el-checkbox-button
              >
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="证件照片:" required>
            <el-upload
              :action="uploadUrl"
              list-type="picture-card"
              :show-file-list="true"
              :file-list="custAddList"
              :data="custAddData"
              :multiple="false"
              accept=".jpg,.jpeg,.png,.JPG,.JPEG"
              :on-change="custAddChange"
              :on-preview="custAddPreview"
              :on-success="custAddSuccess"
              :before-upload="custAddUpload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="custAddDialogVisible" append-to-body>
              <img width="100%" :src="custAddDialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="问题描述:" required prop="problemDesc">
            <el-input
              v-model="dialogData.problemDesc"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btnBox">
      <el-button type="primary" class="confirmBtn" @click="confirm(1)"
        >提交</el-button
      >
      <el-button type="primary" class="returnBtn" @click="confirm(2)"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import DisputeList from "@/api/customer/DisputeList";
import { mapState } from "vuex";
export default {
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
    dialogData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      disputeStatus: "",
      // 争议单状态
      idType: [],
      formDataRules: {
        applyStaffName: [
          { required: true, message: "申请人名称不能为空!", trigger: "blur" },
        ],
        applyStaffPhone: [
          { required: true, message: "申请人电话不能为空!", trigger: "blur" },
        ],
        custName: [
          { required: true, message: "客户名称不能为空!", trigger: "blur" },
        ],
        certType: [
          { required: true, message: "请选择证件类型!", trigger: "change" },
        ],
        certNum: [
          { required: true, message: "证件号码不能为空!", trigger: "blur" },
        ],
        problemType: [
          {
            required: true,
            message: "至少选择一种错误类型！",
            trigger: "change",
          },
        ],
        problemDesc: [
          { required: true, message: "问题描述不能为空！", trigger: "blur" },
        ],
      },
      //新建客户-上传证件照片
      uploadUrl: `${process.env.VUE_APP_CTX_CUST}/saveCustFile`,
      //  新建客户-上传证件照片下后台传递的数据
      custAddData: {
        fileFlag: "dispute",
        oldPhotoPath: "",
      },
      //  新建客户证件照片列表
      custAddList: [],
      custAddDialogVisible: false,
      custAddDialogImageUrl: "",
      //  错误类型
      errTypeArr: [
        {
          label: "统一社会信用代码错误",
          val: "0",
        },
        {
          label: "经营期限字段信息错误",
          val: "1",
        },
        {
          label: "客户名称字段错误",
          val: "2",
        },
        {
          label: "组代无数据",
          val: "3",
        },
        {
          label: "经营状态错误",
          val: "4",
        },
        {
          label: "其他",
          val: "5",
        },
      ],
      imageUrl: "",
      loginPhone: "", //登录人手机号
      photoPath: "", //上传照片路径
    };
  },

  components: {},

  computed: {
    ...mapState("user", ["user"]),
  },

  mounted() {
    this.dialogData.applyStaffName =
      this.dialogData.applyStaffName == ""
        ? this.user.staffName
        : this.dialogData.applyStaffName;
    this.initValue();
    this.getStaffPhone();
  },

  methods: {
    async initValue() {
      const response = await DisputeList.initValue({ flag: "cert_type" });
      if (response.code == 200) {
        this.idType = response.meta.customers;
      }
    },
    async getStaffPhone() {
      const response = await DisputeList.getStaffPhone({
        STAFF_ID: this.user.staffId,
      });
      if (response.code == 200) {
        this.dialogData.applyStaffPhone = response.meta.MOBILE_PHONE;
      }
    },
    custAddSuccess(res, file) {
      this.photoPath = res.meta.photoPath;
      this.custAddData.oldPhotoPath = res.meta.photoPath;
      if (res.code == 200) {
        this.$notify({
          title: "成功",
          message: "图片上传成功",
          type: "success",
        });
      }
    },
    custAddUpload(file) {
      const isPicType =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/JPG" ||
        file.type === "image/JPEG";
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isPicType) {
        this.$message.error("上传头像图片只能是 JPG或者Png 格式!");
      }
      if (!isLt10M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isPicType && isLt10M;
    },
    custAddPreview(file) {
      this.custAddDialogImageUrl = file.url;
      this.custAddDialogVisible = true;
    },
    custAddChange(file, fileList) {
      var returnArr;
      if (fileList.length > 1) {
        returnArr == fileList.shift();
      }
      this.custAddList = fileList;
    },
    handleClose() {
      this.$emit("closeDialog");
      this.$nextTick(() => {
        this.$refs.dialogData.resetFields();
      });
    },
    confirm(num) {
      this.$refs.dialogData.validate((valid) => {
        if (valid) {
          this.newDispute(num);
        } else {
          return false;
        }
      });
    },
    //修改时照片回显
    async getCustPhoto(photoPath) {
      let params = {
        photoPath,
      };
      const response = await DisputeList.getCustPhoto(params);
      this.custAddList = [
        {
          url: response.meta.base64,
        },
      ];
    },
    async newDispute(num) {
      if (this.photoPath == "") {
        this.$alert("证件照片:不能为空!", "提示", { type: "warning" });
        return;
      }
      let parmas = {};
      if (this.dialogData.flag == 1) {
        parmas = {
          actType: "MOD",
          commonRegionId: '500181403',//写死
          proviceCode: '100000',//写死
          workOrderNbr: this.dialogData.workOrderNbr,
          applyStaffId: this.user.staffId,
          applyStaffName: this.dialogData.applyStaffName,
          applyStaffPhone: this.dialogData.applyStaffPhone,
          custName: this.dialogData.custName,
          orgUscc: this.dialogData.orgUscc,
          certType: this.dialogData.certType,
          certNum: this.dialogData.certNum,
          problemType: this.dialogData.problemType.join(","),
          problemDesc: this.dialogData.problemDesc,
          appendix: this.photoPath,
          workOrderStatus: num == 1 ? "3000" : "4000",
          staffId: this.user.staffId,
        };
      } else {
        parmas = {
          actType: "ADD",
          commonRegionId: '500181403',//写死
          proviceCode: '100000',//写死
          workOrderNbr: "",
          applyStaffId: this.user.staffId,
          applyStaffName: this.dialogData.applyStaffName,
          applyStaffPhone: this.dialogData.applyStaffPhone,
          custName: this.dialogData.custName,
          orgUscc: this.dialogData.orgUscc,
          certType: this.dialogData.certType,
          certNum: this.dialogData.certNum,
          problemType: this.dialogData.problemType.join(","),
          problemDesc: this.dialogData.problemDesc,
          appendix: this.photoPath,
          workOrderStatus: num == 1 ? "3000" : "4000",
          staffId: this.user.staffId,
        };
      }
      const response = await DisputeList.dealDispute(parmas);
      if (response.code == 200) {
        if (response.meta.resultCode == 0) {
          if (response.meta.code == 0) {
            this.handleClose();
          } else {
            this.$message({
              showClose: true,
              message: response.meta.msg,
              type: "error",
            });
          }
        } else {
          this.$message({
            showClose: true,
            message: response.meta.resultMsg,
            type: "error",
          });
        }
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.btnBox {
  width: 100%;
  text-align: center;
}
.confirmBtn {
  width: 80px;
  background: #467cd4;
  color: #fff;
  margin: 10px 0;
}
.returnBtn {
  width: 80px;
  background: #467cd4;
  color: #fff;
  margin: 10px;
}
.upload-demo {
  margin-left: 150px;
  margin-bottom: 20px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-icon-plus {
  border: 1px dashed #d9d9d9;
}
</style>